<template>
  <el-dialog
    v-bind="$attrs"
    width="500px"
    v-on="$listeners"
    @close="handleClose"
    @open="handleOpen"
  >
    <el-form
      ref="form"
      v-loading="dialogLoading"
      label-width="70px"
      :model="form"
      @submit.native.prevent="confirm"
    >
      <template v-if="tableType === 3">
        <el-form-item
          :label="$t('flyparam.entry_label')"
          prop="label"
          :rules="[
            {
              required: true,
              trigger: 'blur',
              message: $t('flyparam.required', { label: 'Label' })
            }
          ]"
        >
          <el-input
            v-model="form.label"
            :disabled="entityName"
            :maxlength="64"
            @change="() => (form.label = form.label.trim())"
          />
        </el-form-item>

        <el-form-item :label="$t('flyparam.value')" prop="value">
          <el-input v-model="form.value" :maxlength="255" />
        </el-form-item>
      </template>

      <el-form-item
        v-else
        :label="$t('flyparam.entry_label')"
        prop="rowUniqueKey"
        :rules="[
          {
            required: true,
            trigger: 'blur',
            message: $t('flyparam.required', { label: 'Label' })
          }
        ]"
      >
        <el-input
          v-model="form.rowUniqueKey"
          :maxlength="64"
          @change="() => (form.rowUniqueKey = form.rowUniqueKey.trim())"
        />
      </el-form-item> </el-form
    ><template #footer>
      <div>
        <el-button size="small" @click="() => $emit('update:model-value', false)">{{
          $t('common.cancel')
        }}</el-button>
        <el-button
          :disabled="dialogLoading"
          size="small"
          type="primary"
          :loading="loading"
          native-type="submit"
          @click="confirm"
          >{{ $t('common.confirm') }}</el-button
        >
      </div></template
    >
  </el-dialog>
</template>

<script>
import {
  createRefTableEntry,
  createLabelValueEntry,
  saveReferenceLayoutConfig,
  getLayoutConfigFromReferenceTable
} from '@/api/parameter'
export default {
  inheritAttrs: false,
  props: {
    tableId: {
      type: String
    },
    tableType: {
      type: Number
    },
    entityName: String,
    entityId: String,
    entityValue: String,
    templateId: String
  },
  data() {
    return {
      dialogLoading: false,
      loading: false,
      form: {
        rowUniqueKey: '',
        label: '',
        value: ''
      },
      paramId: ''
    }
  },
  methods: {
    confirm() {
      let request, data
      let valid = false

      this.$refs.form.validate((_valid) => {
        valid = _valid
      })

      if (!valid) {
        return
      }
      this.loading = true
      if (this.entityName) {
        data = [{ paramId: this.paramId, paramValues: [this.form.value] }]
        saveReferenceLayoutConfig({
          templateId: this.templateId,
          tableId: this.tableId,
          entityId: this.entityId,
          data
        })
          .then(() => {
            this.$message.success(this.$t('common.message.operation_success'))
            this.$emit('save')
            this.$emit('update:model-value', false)
          })
          .catch((error) => {
            this.$message.error(error)
          })
          .finally(() => {
            this.loading = false
          })
      } else {
        if (this.tableType === 3) {
          request = createLabelValueEntry
          data = {
            label: this.form.label,
            value: this.form.value
          }
        } else {
          request = createRefTableEntry
          data = {
            rowUniqueKey: this.form.rowUniqueKey
          }
        }

        request(this.templateId, this.tableId, data)
          .then(() => {
            if (this.tableType === 2) {
              debugger
              this.$emit('save', this.form.rowUniqueKey)
            } else {
              this.$emit('save')
            }
            this.$message.success(this.$t('common.message.operation_success'))
            this.$emit('update:model-value', false)
          })
          .catch((error) => {
            this.$message.error(error)
          })
          .finally(() => {
            this.loading = false
          })
      }
    },

    handleClose() {
      this.$refs.form.resetFields()
      Object.assign(this.$data, this.$options.data())
      this.loading = false
    },

    handleOpen() {
      if (this.entityName) {
        this.dialogLoading = true
        Object.assign(this.form, {
          label: this.entityName,
          value: this.entityValue
        })
        getLayoutConfigFromReferenceTable(
          this.templateId,
          this.tableId,
          this.entityId
        ).then((res) => {
          this.dialogLoading = false
          this.paramId = res[0].paramId
        })
      }
    }
  }
}
</script>

<style>
</style>
